<template>
  <div class="home_box">
    <div class="header flex_r_s_b font_25 fw_6 mg_0">
      <div class="header_left flex_box">
        <div class="logo">
          <img src="../../assets/icon/logo_new.png" alt="" />
        </div>
        <div class="nav flex_r_s_b">
          <div
            class="nav_item"
            :class="activeFlag == 0 ? 'nav_ac' : ''"
            @click="tabChange(0)"
          >
            Home
          </div>
          <div
            class="nav_item"
            :class="activeFlag == 1 ? 'nav_ac' : ''"
            @click="tabChange(1)"
          >
            Overview
          </div>
        </div>
      </div>
      <div class="lanch flex_r_c cur" @click="toPage">
        Launch App
        <img src="../../assets/home/lanch.svg" alt="" />
      </div>
    </div>
    <div class="content mg_0">
      <div class="content_one">
        <!-- <img class="bg_img" src="../../assets/home/nav.png" alt=""> -->
        <div class="one_text">
          <div>
            <p><span>Opinion</span> is Value</p>
            <p class="font_25 color_af">Web3.0 social AD protocol</p>
          </div>
        </div>
      </div>
      <div class="line">
        <div class="line_item mg_0"></div>
      </div>
      <div class="two_titlebox">
        <p class="font_5">Influence</p>
      </div>
      <div class="content_two flex_r_s_a">
        <div class="two_item">
          <div class="title_box flex_r_start_2">
            <div class="img">
              <img src="../../assets/home/earn.png" alt="" />
            </div>
            <div class="title font_5" title="Commnet to earn">
              Commnet to earn
            </div>
          </div>
          <div class="info">
            <div class="info_text font_3 text_l color_af">
              Topics go directly to target users, users participate in
              discussions, and get advertising fees based on the influence of
              comments. Every opinion expressed in xfi will bring you a token
              reward
            </div>
          </div>
        </div>
        <div class="two_item">
          <div class="title_box flex_r_start_2">
            <div class="img">
              <img src="../../assets/home/xid.png" alt="" />
            </div>
            <div class="title font_5" title="XID">XID</div>
          </div>
          <div class="info">
            <div class="info_text font_3 text_l color_af">
              XID is a user's data identity, which records the user's speech
              influence, social activity, number of followers, etc. After
              posting topics, commenting, voting, and being commented, XID score
              will grow.
            </div>
          </div>
        </div>
      </div>
      <div class="line">
        <div class="line_item mg_0"></div>
      </div>
      <div class="content_three">
        <div class="three_titlebox">
          <p class="font_5">Solution</p>
          <!-- <p class="font_25 color_af">
                        Solve project problems through technical means
                    </p> -->
        </div>
        <div class="three_info flex_sb">
          <div class="three_item">
            <div class="img_box">
              <img src="../../assets/home/line_0.png" alt="" />
            </div>
            <div class="three_text">
              <p class="font_3">Offchain sign onchain verify</p>
              <p class="color_af font_3 text_c">
                Using wallet structured signature to ensure the uniqueness of
                data and a good experience without gas
              </p>
            </div>
          </div>
          <div class="three_item">
            <div class="img_box">
              <img src="../../assets/home/line_1.png" alt="" />
            </div>
            <div class="three_text">
              <p class="font_3">Publish=mint</p>
              <p class="color_af font_3 text_c">
                The process of publishing topics or comments is the process of
                minting unique NFT
              </p>
            </div>
          </div>
          <div class="three_item">
            <div class="img_box">
              <img src="../../assets/home/line_2.png" alt="" />
            </div>
            <div class="three_text">
              <p class="font_3">P2P storage</p>
              <p class="color_af font_3 text_c">
                In addition to the NFT matedata, users data about interaction
                and signature are distributed storage, safe and verifiable
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="mg_t_5">
      <div class="icon flex_r_c">
        <div class="item flex_box" @click="jumpToLink(0)">
          <img src="../../assets/home/te.png" alt="" />
        </div>
        <div class="item flex_box" @click="jumpToLink(1)">
          <img src="../../assets/home/dic@2x.png" alt="" />
        </div>
        <div class="item flex_box" @click="jumpToLink(2)">
          <img src="../../assets/home/twitter.png" alt="" />
        </div>
        <div class="item flex_box" @click="jumpToLink(3)">
          <img src="../../assets/home/m@2x.png" alt="" />
        </div>
      </div>
      <div class="foot_line mg_0"></div>
      <div class="font_10 mg_tb_2 color_af">
        © 2022 XFI All rights reserved.
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeFlag: 0,
    };
  },
  methods: {
    tabChange(type) {
      this.activeFlag = type;
      if (type == 1) {
        this.$router.push({
          path: "/overview",
        });
      }
    },
    toPage: function () {
      // this.$router.push({
      //   path: "/index",
      // });
      window.open("https://app.xfi.network", "_blank");
    },
    jumpToLink: function (type) {
      let linkUrl = "";
      if (type == 0) {
        linkUrl = "https://t.me/xfinetwork";
      }
      if (type == 1) {
        linkUrl = "https://discord.gg/DSp8g5wyuJ";
      }
      if (type == 2) {
        linkUrl = "https://twitter.com/xfi_network1";
      }
      if (type == 3) {
        linkUrl = "https://xfinetwork.medium.com/";
      }
      window.open(linkUrl, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.home_box {
  footer {
    background: #000000;
    width: 100%;
    height: auto;
    overflow: hidden;
    .foot_line {
      width: 100%;
      height: 1px;
      border-radius: 50%;
      background-image: linear-gradient(90deg, #000, #1f2226, #000);
    }
    .icon {
      .item {
        margin: 0.5rem 0.3rem;
        cursor: pointer;
        img {
          width: 35px;
        }
      }
    }
  }
  @media screen and (max-width: 414px) {
    .content {
      width: 85%;
      .content_three {
        .three_info {
          // overflow: hidden;
          flex-direction: column;
          margin-top: 50px;
          .three_item:nth-child(1) {
            margin-top: 25px;
          }
          .three_item {
            // width: 28%;
            // height: 285px;
            background: #1c2125;
            box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.35);
            border-radius: 4px;
            padding: 0.2rem 0.25rem;
            margin-top: 65px;
            .three_text {
              margin-top: -50px;
              p:nth-child(1) {
                color: #c67dff;
                font-size: 18px;
              }
              p:nth-child(2) {
                font-size: 15px;
              }
            }
            .img_box {
              img {
                width: 80%;
                margin-top: -100px;
              }
            }
          }
        }
        .three_titlebox {
          p:nth-child(1) {
            color: #c67dff;
            margin-top: 10px;
          }
        }
      }
      .two_titlebox {
        p:nth-child(1) {
          color: #c67dff;
          margin-top: 10px;
        }
      }
      .content_two {
        flex-direction: column;
        margin: 30px auto;
        .two_item {
          background: #1c2125;
          box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.35);
          border-radius: 4px;
          padding: 20px;
          margin: 0 auto 10px;
          .title_box {
            display: flex;
            align-content: center;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            .img {
              display: flex;
              margin-right: 10px;
              img {
                width: 30px;
              }
            }
            .title {
              color: #c67dff;
              font-size: 18px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .info {
            .title {
              color: #c67dff;
            }
            .info_text {
              font-size: 15px;
              margin-left: 30px;
            }
          }
        }
      }
      .line {
        .line_item {
          width: 1rem;
          height: 4px;
          background: #c67dff;
        }
      }
      .content_one {
        background: url("../../assets/home/nav.png") no-repeat center;
        background-position: right;
        background-size: contain;
        // padding: 0.35rem;
        position: relative;
        height: 200px;
        .bg_img {
          position: absolute;
          top: 0;
          left: 15%;
          height: 200px;
          object-fit: contain;
        }
        .one_text_tip {
          text-align: left;
          width: 65%;
          margin: 20px auto;
        }
        .one_text {
          font-size: 20px;
          font-family: DIN Alternate;
          font-weight: bold;
          position: absolute;
          top: 20%;
          left: 0%;
          width: 80%;
          transform: translate(0%, 10%);
          color: #ffffff;
          p {
            text-align: left;
            width: 65%;
          }
          p:nth-child(2) {
            font-size: 0.18rem;
          }
          div {
            text-align: left;
            // width: 65%;
            // margin: 20px auto;
            line-height: 30px;
            p {
              span {
                color: #c67dff;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (min-width: 415px) {
    .content {
      width: 85%;
      .content_three {
        .three_info {
          // overflow: hidden;
          margin-top: 90px;
          .three_item {
            width: 28%;
            // height: 285px;
            background: #1c2125;
            box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.35);
            border-radius: 4px;
            padding: 0.2rem 0.25rem;
            .three_text {
              margin-top: -50px;
              p:nth-child(1) {
                color: #c67dff;
                margin-bottom: 20px;
              }
            }
            .img_box {
              margin-top: -50px;
              img {
                width: 80%;
                margin-top: -100px;
              }
            }
          }
        }
        .three_titlebox {
          p:nth-child(1) {
            color: #c67dff;
          }
        }
      }
      .two_titlebox {
        p:nth-child(1) {
          color: #c67dff;
        }
      }
      .content_two {
        margin: 30px auto;
        .two_item {
          width: 45%;
          background: #1c2125;
          box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.35);
          border-radius: 4px;
          padding: 0.3rem;
          .title_box {
            .img {
              display: flex;
              margin-right: 10px;
              img {
                width: 60px;
              }
            }
            .title {
              color: #c67dff;
              // margin-top: 10px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .info {
            .title {
              color: #c67dff;
            }
            .info_text {
              margin-left: 70px;
            }
          }
        }
      }
      .line {
        .line_item {
          width: 1rem;
          height: 4px;
          background: #c67dff;
        }
      }
      .content_one {
        background: url("../../assets/home/nav.png") no-repeat center;
        background-position: right;
        background-size: contain;
        // padding: 0.35rem;
        position: relative;
        height: 400px;
        .bg_img {
          position: absolute;
          top: 0;
          left: 15%;
          height: 400px;
          object-fit: contain;
        }
        .one_text_tip {
          text-align: left;
          width: 65%;
          margin: 20px auto;
        }
        .one_text {
          font-size: 50px;
          font-family: DIN Alternate;
          font-weight: bold;
          position: absolute;
          top: 10%;
          left: 0%;
          width: 80%;
          transform: translate(0%, 10%);
          color: #ffffff;
          p {
            text-align: left;
            width: 65%;
          }
          div {
            text-align: left;
            width: 65%;
            // margin: 20px auto;
            line-height: 1rem;
            p {
              span {
                color: #c67dff;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 414px) {
    .header {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      padding: 0 20px;
      .header_left {
        .logo {
          img {
            display: block;
            height: 20px;
            margin: 10px auto;
          }
        }
        .nav {
          width: 135px;
          height: 100%;
          margin-left: 25px;
          .nav_ac {
            color: #c67dff;
          }
          .nav_item {
            cursor: pointer;
          }
        }
      }
      .lanch {
        img {
          width: 10px;
          height: 10px;
          display: block;
          margin-left: 10px;
        }
      }
      .lanch:hover {
        color: #c67dff;
      }
    }
  }
  @media screen and (min-width: 415px) {
    .header {
      width: 90%;
      height: 70px;
      line-height: 70px;
      overflow: hidden;
      .header_left {
        .logo {
          img {
            display: block;
            height: 50px;
            margin: 10px auto;
          }
        }
        .nav {
          width: 220px;
          height: 100%;
          margin-left: 60px;
          .nav_ac {
            color: #c67dff;
          }
          .nav_item {
            cursor: pointer;
          }
        }
      }
      .lanch {
        img {
          width: 20px;
          height: 20px;
          display: block;
          margin-left: 10px;
        }
      }
      .lanch:hover {
        color: #c67dff;
      }
    }
  }
}
</style>